<template>
  <div>
    <el-drawer :title="title" :visible.sync="showConfig"
               :modal-append-to-body="false"
               :close-on-press-escape="false"
               :size="'600px'"
               @close="cancel()"
               direction="rtl" :modal="false" destroy-on-close custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <el-form ref="form">
          <div class="demo-drawer__content-detail">
            <div class="line-box">
              <p class="line-title">姓名</p>
              <p class="line-name">小王</p>
            </div>
            <div class="line-box">
              <p class="line-title">所在部门</p>
              <p class="line-name">人事部门</p>
            </div>
            <div class="line-box">
              <p class="line-title">请假类型</p>
              <p class="line-name">
                <dict-tag
                  v-if="detailData"
                  :options="dict.type.sys_examine_flow"
                  :value="detailData.type"
                />
              </p>
            </div>
            <div class="line-box">
              <p class="line-title">开始时间</p>
              <p class="line-name">20-20-04-02 08:00:00</p>
            </div>
            <div class="line-box">
              <p class="line-title">结束时间</p>
              <p class="line-name">20-20-04-05 08:00:00</p>
            </div>
            <div class="line-box">
              <p class="line-title">时长（小时）</p>
              <p class="line-name">4</p>
            </div>
            <div class="line-box">
              <p class="line-title">请假事由</p>
              <p class="line-name">不知道</p>
            </div>
            <div class="line-box">
              <p class="line-title">图片</p>
              <div>
                <el-image
                  style="width: 70px; height: 70px;margin-right: 5px;"
                  :src="url"
                  v-for="item in 4"
                  fit="fill"
                  :preview-src-list="srcList"></el-image>
              </div>
            </div>
          </div>
        </el-form>
        <div class="demo-drawer__footer">
          <div class="demo-drawer__footer-btn" @click="deletApply()">
            <span class="el-icon-folder-checked"></span>
            <p>通过</p>
          </div>
          <div class="demo-drawer__footer-btn" @click="deletApply()">
            <span class="el-icon-folder-delete"></span>
            <p>驳回</p>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getExamine
} from "@/api/system/examine";
import {leaveGet} from "@/api/system/leave"
import {overtimeGet} from "@/api/system/leave"
import {cardReplacementGet} from "@/api/system/leave"

export default {
  name: "rule",
  props: ['visible', 'paramId'],
  dicts: ['sys_examine_flow'],
  components: {},
  data() {
    return {
      showConfig: false,
      title: '详情',
      detailData: null,
      ruleType: {},
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  watch: {
    visible() {
      this.showConfig = this.visible
      if (this.visible) {
        this.getDetail()
      } else {
        this.detailData = null
        this.ruleType = {}
      }
    }
  },
  created() {
  },
  methods: {
    getDetail() {
      // 审批类型 请假 11；补卡 12；加班 13；销价 14；入职 21；转正 22；调薪资 23；调岗 24；离职 25；发票 26
      getExamine(this.paramId).then(res => {
        this.detailData = res.data
        this.getExamineDetail()
      })
    },
    getExamineDetail(){
      switch (this.detailData.type) {
        case 11:
          break;
        case 12:
          break;
        case 13:
          break;
        case 14:
          break;
        case 21:
          break;
        case 22:
          break;
        case 23:
          break;
        case 24:
          break;
        case 25:
          break;
      }
    },
    submitline() {
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    deletApply() {
      this.$prompt('输入审批信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped>
.demo-drawer__content {
  display: flex;
  flex-direction: column;
  background: #f2f4f6;
}

.demo-drawer__content form {
  flex: 1;
}

.demo-drawer__content-detail {
  background: #fff;
  padding: 20px;
}

.demo-drawer__content-detail p {
  margin: 0;
}

.demo-drawer__content-detail p.line-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.demo-drawer__content-detail p.line-name {
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-drawer__content-detail .line-box {
  margin-bottom: 20px;
}

.demo-drawer__content-detail .line-box:last-child {
  margin-bottom: 0;
}

</style>
